<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     *{
         margin: 0px;
         padding: 0px;
         list-style: none;
     }
     textarea{
         width: 800px;
         margin: 10px auto;
         display: block;
         resize: none;
         outline: none;
     }
     button{
         width: 800px;
         margin: 10px auto;
         display: block;
         background:orange;
         border: none;
         outline: none;
         line-height: 40px;
         cursor:pointer;
         color:#fff;
     }
     ul{
         width: 800px;
         margin: 10px auto;
     }
     ul>li{
         background-color: olivedrab;
         margin-bottom: 10px;
         position: relative;
         padding: 4px;
     }
     span{
         position: absolute;
         right: -5px;
         top: -5px;
         cursor: pointer;
     }
    </style>
</head>
<body>
    <textarea name="" id="txt" cols="30" rows="10"></textarea>
    <button id="btn">微博发布</button>
    <ul id="box">
        <li>
            太阳总冠军
            <p>2021-06-04</p>
            <span>X</span>
        </li>
    </ul>
    <script>
       btn.onclick=function(){
           if(txt.value==''){
               alert('输入内容啦')
           }else{

           
           var val=txt.value;
           var tag=document.createElement("li");
           tag.innerHTML=`${val}
           <p>2021-06-04<p>
           <span>X</span>`
           box.appendChild(tag);
           txt.value=''
       }
       }
    </script>
</body>
</html>